<template>
	<div class="index-box">
		<headerNav></headerNav>
		<serviceIcon></serviceIcon>
		<div class="indexbanner">
			<div class="indextitle">
				<img src="../../../static/images/indexbanner.jpg" />
				<div class="h">
					<h4>互联网+新农村</h4>
					<p>远村以农村为中心，已初步实现集农村金融，农产品销售，农村生态旅游于一体的新农村模式。</p>
				</div>
			</div>
		</div>
		<div class="pattern">
			<div class="cbody clearfix">
				<div class="patternitem">
					<img src="../../../static/images/pattern_1.png" />
					<h5>农村金融</h5>
					<p>认筹回购模式，提前筹资对农产品</br>
进行更优的生产管理，在产品收获后</br>
参与回购，获得投资回报</p>
				</div>
				<div class="patternitem">
					<img src="../../../static/images/pattern_2.png" />
					<h5>农产品销售</h5>
					<p>将已收成的生态农产品，挂在平台</br> 进行团购,让消费者用更少的成本，</br> 获得更优质的产品</p>
				</div>
				<div class="patternitem">
					<img src="../../../static/images/pattern_3.png" />
					<h5>农村生态行</h5>
					<p>平台致力于美丽乡村建设，将更美</br> 的风景，更生态的食品展现在游客面</br> 前，体验不一样的生态出行</p>
				</div>
			</div>
		</div>
		<div class="finance">
			<div class="cbody">
				<h4>
					<span>农村金融</span>
					<p>RURAL FINACE</p>
				</h4>
				<p>远村推出认筹回购模式，提前筹资,对农产品进行更优的</br> 生产管理，提高当地农村的经济效益，产品收获后，产品与金钱的双重选择。</p>
				<div class="finance_imgbox">
					<div class="overhid">
						<img class="tra_9 amplifier" src="../../../static/images/finance_1.jpg" />
					</div>
					<div class="overhid">
						<img class="tra_9 amplifier" src="../../../static/images/finance_2.jpg" />
					</div>
				</div>
			</div>
		</div>
		<div class="market">
			<div class="cbody">
				<h4>
					<span>农产品销售</span>
					<p>AGRICULTURAL MARKETING SALES</p>
				</h4>
				<p>健康绿色的原产地食材在平台上出售， 农家辛勤劳作的成果直接送到手中</p>
				<div class="market_imgbox">
					<div class="overhid">
						<img class="tra_9 amplifier" src="../../../static/images/market_1.jpg" />
					</div>
					<div class="overhid">
						<img class="tra_9 amplifier" src="../../../static/images/market_2.jpg" />
					</div>
					<div class="overhid">
						<img class="tra_9 amplifier" src="../../../static/images/market_3.jpg" />
					</div>
					<div class="overhid">
						<img class="tra_9 amplifier" src="../../../static/images/market_4.jpg" />
					</div>
				</div>
			</div>
		</div>
		<div class="action">
			<div class="cbody">
				<h4>
					<span>农村生态行</span>
					<p>RURAL ECOTOURISM</p>
				</h4>
				<p>致力美丽乡村建设，带动当地经济效益的增长，推出农村生态行，</br> 展示不一样的农村，体验不一样的生态出行</p>
				<div class="action_imgbox">
					<div class="overhid">
						<img class="tra_9 amplifier" src="../../../static/images/action_1.jpg" />
					</div>
					<div class="overhid">
						<img class="tra_9 amplifier" src="../../../static/images/action_2.jpg" />
					</div>
					<div class="overhid">
						<img class="tra_9 amplifier" src="../../../static/images/action_3.jpg" />
					</div>
				</div>
			</div>
		</div>
		<div class="brand">
			<div class="brandlist cbody clearfix">
				<div class="branditem">
					<div class="brand_img ">
						<img src="../../../static/images/brand_1.jpg" />
						<h5>品牌服务</h5>
					</div>
					<p>平台以创新为动力，提升农业</br> 农村资源的开发利用率，促进农 </br>业与相关产业深度融合</p>
				</div>
				<div class="branditem">
					<div class="brand_img">
						<img src="../../../static/images/brand_2.jpg" />
						<h5>品牌愿景</h5>
					</div>
					<p>我们以改善农户经济为创业初心</br> 帮助农户脱贫；以互联网创新 </br>思维，建立消费者与农户的信任连接</p>
				</div>
				<div class="branditem">
					<div class="brand_img">
						<img src="../../../static/images/brand_3.jpg" />
						<h5>品牌价值观</h5>
					</div>
					<p>对扶贫的良好践行，让乡村与市场经济真正</br> 接轨，通过模式的灵活发展，让乡村更美</br> 让乡亲更富，也让消费者更放心。</p>
				</div>
			</div>
		</div>
		<footerNav></footerNav>
	</div>
</template>
<script>
	import headerNav from './template/header'
	import serviceIcon from './template/service'
	import footerNav from './template/footer'
	export default {
		data() {
			return {

			}
		},
		components: {
			headerNav,
			serviceIcon,
			footerNav
		},
		methods: {

		},
		beforeRouteLeave(to, from, next) {
			this.$destroy();
			next();
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	@import '../../styles/styles.scss';
	.index-box{
		    background: #FFFFFF;
   			 height: 100%;
	}
.indexbanner{
	background: #fff;
}
.indextitle{
	position: relative;
	/*height: 500px;*/
	overflow: hidden;
	/*background: url(../../../static/images/indexbanner.jpg) no-repeat;
	background-size: 100% auto;*/
	/*background-position: center;*/
	/*background-attachment: fixed;*/
	img{
		width: 100%;
		height: auto;
		/*min-width: 1920px;*/
	}
}
.indextitle .h{
	position: absolute;
	margin: 0;
	height: 321px;
	top: 16%;
	right: 25%;
	background: url(../../../static/images/indexicon.png) no-repeat;
	background-size:auto 100% ;
	overflow: hidden;
}
.indextitle .h h4{
	font-size:36px;
	font-family:MicrosoftYaHei;
	color: #fff;
	text-align: left;
	/*font-weight: normal;*/
	margin-top: 71px;
}
.indextitle .h p{
	margin: 35px 0 0 0;
	width: 340px;
	font-size:20px;
	color:rgba(255,255,255,1);
	 /*white-space:nowrap;*/
	 letter-spacing: 1px;
	 line-height:35px ;
}
.pattern{
	background: #F7F7F7;
	padding: 80px 0;
	text-align: center;
}
.patternitem{
	display: inline-block;
	/*float: left;*/
	width:382px;
	height:338px;
	margin-right: 20px;
	border-radius:6px;
	background: #fff;
	overflow: hidden;
	transition: all .3s;
	-moz-transition: all .3s;	/* Firefox 4 */
	-webkit-transition: all .3s;	/* Safari 和 Chrome */
	-o-transition: all .3s;	/* Opera */
	/*cursor: pointer;*/
	&:hover{
		box-shadow:0px 0px 10px rgba(34,34,34,0.1);
	}
	&:nth-child(3n){
		margin-right: 0;
	}
	img{
		display: block;
		width: 110px;
		height: 110px;
		margin: 65px auto 0;
	}
	h5{
		font-size:18px;
		font-family:MicrosoftYaHei;
		color:rgba(51,51,51,1);
		font-weight: normal;
		margin: 10px auto 20px;
		text-align: center;
	}
	p{
		text-align: center;
		font-size:12px;
		font-family:MicrosoftYaHei;
		color:rgba(140,140,139,1);
		line-height: 20px;
	}
}
.finance{
	padding-top: 115px;
	padding-bottom: 96px;
	h4{
		font-family:MicrosoftYaHei;
		text-align: center;
		font-weight: normal;
		span{
			font-size: 38px;
			color: #2B89FC;
			font-weight: bold;
		}
		p{
			font-size:24px;
			color: #222222;
			margin-top: 20px;
			&:after{
				content: "";
				display: block;
				margin: 20px auto 0;
				width: 35px;
				height: 4px;
				background: #2B89FC;
			}
		}
	}
	p{
		text-align: center;
		line-height: 25px;
		margin-top: 80px;
	}
	.finance_imgbox{
		text-align: center;
		margin-top: 50px;
		div{
			width:424px;
			height:319px;
			border-radius: 4px;
			margin-right: 16px;
			&:nth-child(2n){
				margin-right: 0;
			}
			img{
				width: 100%;
				height: auto;
			}
		}
	}
}
.market{
	padding-top: 97px;
	padding-bottom: 96px;
	background: #F7F7F7;
	h4{
		font-family:MicrosoftYaHei;
		text-align: center;
		font-weight: normal;
		span{
			font-size: 38px;
			color: #2B89FC;
			font-weight: bold;
		}
		p{
			font-size:24px;
			color: #222222;
			margin-top: 20px;
			&:after{
				content: "";
				display: block;
				margin: 20px auto 0;
				width: 35px;
				height: 4px;
				background: #2B89FC;
			}
		}
	}
	p{
		text-align: center;
		line-height: 25px;
		margin-top: 80px;
	}
	.market_imgbox{
		text-align: center;
		margin-top: 50px;
		div{
			width:260px;
			height:196px;

			border-radius: 4px;
			margin-right: 20px;
			&:nth-child(4){
				margin-right: 0;
			}
			img{
				width: 100%;
				height: auto;
			}
		}
	}
}
.action{
	padding-top: 97px;
	padding-bottom: 96px;
	/*background: #F7F7F7;*/
	h4{
		font-family:MicrosoftYaHei;
		text-align: center;
		font-weight: normal;
		span{
			font-size: 38px;
			color: #2B89FC;
			font-weight: bold;
		}
		p{
			font-size:24px;
			color: #222222;
			margin-top: 20px;
			&:after{
				content: "";
				display: block;
				margin: 20px auto 0;
				width: 35px;
				height: 4px;
				background: #2B89FC;
			}
		}
	}
	p{
		text-align: center;
		line-height: 25px;
		margin-top: 80px;
	}
	.action_imgbox{
		text-align: center;
		margin-top: 50px;
		div{
			width:260px;
			height:298px;
			border-radius: 4px;
			margin-right: 20px;
			&:nth-child(4){
				margin-right: 0;
			}
			img{
				width: 100%;
				height: auto;
			}
		}
	}
}
.tra_9{
	transition: all .9s;
	-moz-transition: all .9s;	/* Firefox 4 */
	-webkit-transition: all .9s;	/* Safari 和 Chrome */
	-o-transition: all .9s;	/* Opera */
}
.amplifier:hover{
	transform: scale(1.1);
	-ms-transform: scale(1.1);	/* IE 9 */
	-webkit-transform: scale(1.1);	/* Safari 和 Chrome */
	-o-transform: scale(1.1);	/* Opera */
	-moz-transform: scale(1.1);	/* Firefox */
}
.overhid{
	overflow: hidden;
	display: inline-block;
}
.brand{
	padding-top: 98px;
	padding-bottom: 98px;
	background: #F7F7F7;
	.brandlist{
		.branditem{
			float: left;
			width:382px;
			height:502px;
			background:rgba(255,255,255,1);
			border-radius:6px;
			overflow: hidden;
			margin-right: 20px;
			background: #fff;
			transition: all .3s;
			-moz-transition: all .3s;	/* Firefox 4 */
			-webkit-transition: all .3s;	/* Safari 和 Chrome */
			-o-transition: all .3s;	/* Opera */
			&:hover{
				box-shadow:0px 0px 10px rgba(34,34,34,0.1);
			}
			&:nth-child(3n){
				margin-right: 0;
			}
			.brand_img{
				position: relative;
				img{
					width: 100%;
					height: auto;
				}
				h5{
					font-size:30px;
					font-family:MicrosoftYaHei;
					color:rgba(255,255,255,1);
					font-weight: normal;
					position: absolute;
					margin: 0;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					-ms-transform: translate(-50%,-50%);	/* IE 9 */
					-webkit-transform: translate(-50%,-50%);	/* Safari and Chrome */
					-o-transform: translate(-50%,-50%);		/* Opera */
					-moz-transform: translate(-50%,-50%);		/* Firefox */
				}
			}
			p{
				font-size:14px;
				font-family:MicrosoftYaHei;
				color:rgba(34,34,34,1);
				text-align: center;
				line-height: 32px;
				margin-top: 32px;
			}
		}
	}
}
</style>